<template>

	<view class="foot">
		<view style="width: 130px;">
			文档标题：<span class="property-info">{{appStore.state.title}} </span>
		</view>

		<view class="property-item">
			创建日期：<span class="property-info">{{appStore.state.createdAt.toLocaleString()}} </span>
		</view>

		<view class="property-item">
			时间范围：<span class="property-info">{{appStore.state.dateRange.begin}} - {{appStore.state.dateRange.end}}
			</span>
		</view>


		<view style="margin-left: 5px;">
			页码：<span class="property-info">{{appStore.state.pageIndex}}/{{appStore.state.pageCount}}</span>
		</view>

		<view style="margin-left: 5px;">
			页面：<span class="property-info">{{appStore.state.pageSize}}</span>
		</view>


		<view style="margin-left: 5px;">
			事件数：<span class="property-info">{{appStore.state.eventsCount}}</span>
		</view>

	</view>
</template>

<script setup>
	import {
		useAppStore
	} from '@/store/appStore';
	
	const appStore = useAppStore();
</script>

<style lang="scss">
	.foot {
		display: flex;
		flex-direction: row;
		background-image: linear-gradient(var(--background-color3), var(--background-color2));
		height: 20px;
		line-height: 20px;
		font-size: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.property-info {
		background-color: var(--background-color);
		padding: 2px 5px;
		border-radius: 3px;
		color: var(--color2);
		font-weight: 700;
	}

	.property-item {
		flex: 1;
	}
</style>